<template>
  <d2-container class="page">
    <div class="page-table">
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="locationType" label="显示位置">
          <template slot-scope="scope">
            <span v-if="scope.row.locationType === 0">首页</span>
            <span v-else-if="scope.row.locationType === 1">我的</span>
            <span v-else-if="scope.row.locationType === 2">轮播</span>
          </template>
        </el-table-column>
        <el-table-column prop="photoUrl" label="预览图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.photoUrl + '?v=' + new Date().getTime()">
              <div slot="error" class="image-slot">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="发布" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       v-if="scope.row.status === 0"
                       @click="onReport({index: scope.$index, row: scope.row})"
            >发布</el-button>
            <el-button type="success" size="small"
                       v-if="scope.row.status === 1"
                       @click="onReport({index: scope.$index, row: scope.row})"
            >已发布</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       @click="onUpdate({index: scope.$index, row: scope.row})"
            >修改</el-button>
            <el-button type="primary" size="small"
                       @click="onInfo({index: scope.$index, row: scope.row})"
            >详情</el-button>
            <el-button type="danger" size="small"
                       @click="onDelete({index: scope.$index, row: scope.row})"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next, jumper, total"
        :page-size="queryForm.limit"
        :current-page="queryForm.page"
        :total="pagination.total"
        @current-change="pageChange">
      </el-pagination>
    </div>
    <!--  新增  -->
    <ad-add
      v-if="visibleAdd"
      :visible="visibleAdd"
      @cancel="cancelAdd"
      @submit="submitAdd"
    />
    <!--  修改  -->
    <ad-update
      v-if="visibleUpdate"
      :visible="visibleUpdate"
      :info="currRow"
      @cancel="cancelUpdate"
      @submit="submitUpdate"
    />
    <!--  详情  -->
    <ad-info
      v-if="visibleInfo"
      :visible="visibleInfo"
      :info="currRow"
      @submit="submitInfo"
    />
  </d2-container>
</template>

<script>
  import AdAdd from './ad-add'
  import AdUpdate from './ad-update'
  import AdInfo from './ad-info'
  import { mapActions } from 'vuex'

  export default {
    name: 'page',
    data () {
      return {
        visibleAdd: false,
        visibleUpdate: false,
        visibleInfo: false,
        loading: false,
        currRow: null,
        queryForm: {
          moduleType: '1',
          page: 1,
          limit: 10
        },
        pagination: {
          total: 0
        },
        tableData: []
      }
    },
    components: {
      AdAdd,
      AdUpdate,
      AdInfo
    },
    mounted () {
      this.queryList()
    },
    methods: {
      ...mapActions('d2admin/pm.ad', [
        'adList',
        'adDelete',
        'adReport'
      ]),
      // 查询列表
      queryList () {
        this.loading = true
        this.adList(this.queryForm).then(
          res => {
            this.loading = false
            this.tableData = res.list
            this.pagination.total = res.totalCount
          }
        ).catch(err => {
          this.loading = false
        })
      },
      // 切换发布状态
      onReport ({ index, row }) {
        let content = ''
        if (row.status === 0) {
          content = '您确定发布吗？'
        } else {
          content = '您确定取消发布吗？'
        }
        this.$confirm(content, '提示').then(res => {
          this.adReport({
            id: row.id
          }).then(res => {
            this.queryList()
          })
        }).catch(err => {})
      },
      // 其他用途调用
      queryHandle (page) {
        this.queryForm.page = page
        this.queryList()
      },
      // 切换分页
      pageChange (curr) {
        this.queryHandle(curr)
      },
      // 查询按钮
      onSubmit () {
        this.queryHandle(1)
      },
      // 新增
      onAdd () {
        this.visibleAdd = true
      },
      // 修改
      onUpdate ({ index, row }) {
        this.currRow = row
        this.visibleUpdate = true
      },
      // 详情
      onInfo ({ index, row }) {
        this.currRow = row
        this.visibleInfo = true
      },
      // 删除
      onDelete ({ index, row }) {
        this.$confirm('您确定删除吗？', '提示').then(res => {
          this.adDelete({
            id: row.id
          }).then(res => {
            this.queryHandle(1)
          })
        }).catch(err => {})
      },
      // 取消新增操作
      cancelAdd (visible) {
        this.visibleAdd = visible
      },
      // 提交新增操作
      submitAdd (visible) {
        this.visibleAdd = visible
        this.queryHandle(1)
      },
      // 取消修改操作
      cancelUpdate (visible) {
        this.visibleUpdate = visible
      },
      // 提交修改操作
      submitUpdate (visible) {
        this.visibleUpdate = visible
        this.queryHandle(1)
      },
      // 提交详情操作
      submitInfo (visible) {
        this.visibleInfo = visible
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    .page-form {
      border: 1px solid #eee;
      padding: 20px 20px 0;
    }
    .page-table {
      border: 1px solid #eee;
      padding: 20px;
      margin-top: 20px;
      .el-image {
        width: 60px;
        height: 60px;
      }
    }
  }
</style>

